<!doctype html>
<html ondragstart="return false">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键字">
    <meta name="Description" content="描述">
    <title>烟花特效</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        #thecanvas{
            background-color: black;
        }
    </style>
</head>
<body>
    <canvas id="thecanvas"></canvas>
    <script>
        let thecanvas = document.getElementById("thecanvas");
        let canvas = thecanvas.getContext('2d');
        function resizeCanvas(){
            thecanvas.width = window.innerWidth;
            thecanvas.height = window.innerHeight;
            clearCanvas();
        }
        resizeCanvas();
        function clearCanvas(){
            canvas.fillStyle = '#040404';
            canvas.fillRect(0,0,thecanvas.width,thecanvas.height);
        }
        function handleClick(e){
            let x = e.clientX;
            let y = e.clientY; 
            createFires(x,y);
        }
        let num = 10;
        let initRadin = Math.PI/180;
        let fires = [];


        function createFires(x,y){
            let num = Math.ceil(Math.random()*20)+25;
            let initAngle = 360/num;
            let color = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;
            let reduceAngle = Math.random()*10;
            let light,angle,radin,speed,vx,vy,r;
            for(let i = num - 1;i >=0 ;i--){
                light = Math.random()*2+1;
                angle = initAngle*i+reduceAngle;
                radin = angle*initRadin;
                speed = light/2;
                vx = light/3;
                vy = light/5;
                r = Math.random()*1+0.1;
                let p = {
                    x:x + Math.cos(r),
                    y:y + Math.sin(r),
                    vx:speed*Math.cos(radin),
                    vy:speed*Math.sin(radin),
                    light,
                    color,
                    g:0.005
                };
                fires.push(p);
            }   
        }
        document.addEventListener("resize",resizeCanvas);
        document.addEventListener("mousedown",handleClick);
        let nums = 0;
        function drawFires(){
            let vx,vy,light;
            for(let i = fires.length - 1;i >= 0;i--){
                fires[i].x += fires[i].vx;
                fires[i].y += fires[i].vy;
                fires[i].vy += fires[i].g;
                light = fires[i].light;
                if(light<=0){
                    fires.splice(i,1);
                }else{
                    fires[i].light -= 0.01;
                    canvas.beginPath();
                    canvas.arc(fires[i].x,fires[i].y,light,0,Math.PI*2,false);
                    canvas.closePath();
                    canvas.fillStyle = fires[i].color;   
                    canvas.fill();
                }
            }
            canvas.fillStyle = 'rgba(0,0,0,0.1)';
            canvas.fillRect(0,0,thecanvas.width,thecanvas.height);
        }
        setInterval(function(){
            createFire();
        },100);
        let fire = [];
        function createFire(){
            let tx = Math.random()*window.innerWidth;
            let ty = Math.random()*window.innerHeight/2+100;
            let sy = window.innerHeight;
            fire.push({
                sy,
                tx,
                ty,
                speed:Math.random()+3,
                r:Math.random()*2
            });
        }
        function drawFire(){
          for(let i = fire.length - 1;i >= 0;i--){
            fire[i].sy -= fire[i].speed;
            if(fire[i].ty>fire[i].sy){
                createFires(fire[i].tx,fire[i].ty);
                fire.splice(i,1);
            }else{
                canvas.beginPath();
                canvas.arc(fire[i].tx,fire[i].sy,fire[i].r,0,Math.PI*2,false);
                canvas.closePath(); 
                canvas.fillStyle = "#ffffff";
                canvas.fill();
            }
          }
        }
        function flash(){
            drawFire();
            drawFires();
            requestAnimationFrame(flash);
        }
        flash();
    </script>
</body>
</html> 